<template>
    <div>
     <i-input icon="search" placeholder="请输入..." style="width: 200px" @on-click="search()" v-model="searchText"></i-input>
    <Button @click="modal=true;type='create'" type="primary">增加用户</Button>
    <Button type="error" @click="confirm()">删除所选用户</Button>
    <Modal
        v-model="modal"
        title="添加新用户"
        :mask-closable="false">
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
         <FormItem label="Name" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
         <FormItem label="Password" prop="password">
            <Input v-model="formValidate.password" placeholder="Enter your password"></Input>
        </FormItem>
        <FormItem label="E-mail" prop="email">
            <Input v-model="formValidate.email" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="Age" prop="age">
            <Input v-model="formValidate.age" placeholder="Enter your age"></Input>
        </FormItem>    
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    </Modal>
    <Table stripe border :columns="columns" :data="data" @on-selection-change="addSelectData($event)"></Table>
     <Page :total="title" :current="page" size="small" show-elevator show-sizer @on-change="pageChange($event)" @on-page-size-change="pageSizeChange($event)" ></Page>
    </div>
</template>
<script>
import axios from "axios";
    export default {
        data () {
            return {
                modal1:false,
                type:'',
                searchText:'',
                realSearchText:'',
                modal:false,
                selectData:[],
                formValidate: {
                    name: '',
                    password:'',
                    email: '',
                    age:''
                    },
                 ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    password:[
                         { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                    age:[
                         { required: true, message: 'The name cannot be empty', trigger: 'blur' },
                    ]
                 }, 
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: 'password',
                        key: 'password'
                    },
                    {
                        title: 'email',
                        key: 'email'
                    },
                    {
                        title: 'age',
                        key: 'age'
                    },
                    {
                        title: 'data',
                        key: 'data'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.type="change";
                                            this.modal=true;
                                            this.formValidate={...(this.data[params.index])};
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                limit:10,
                page:1,
                title:10
            }
        },
        methods:{
            confirm () {
                this.$Modal.confirm({
                    title: '确认删除？',
                    content: '是否确认删除',
                    onOk: () => {
                        if(!this.selectData){
                            this.$Message.error('删除目标未选定'); 
                        }
                        this.manyDelete();
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            },
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.data[index].name}<br>Password：${this.data[index].password}<br>Email:${this.data[index].email}<br>Age：${this.data[index].age}<br>Data：${this.data[index].data}`
                })
            },
            remove (index) {
                var id=this.data[index]._id;
                if(this.data.length==1&&this.page!=1){
                    this.page-=1
                }
                 axios.delete(`http://10.31.160.22:3000/users/data/${id}`)
                 .then(res=>{
                     this.$Modal.success({
                    title: 'delete success',
                    content: `${res}`
                })
                  this.getUserDate();
                 });
            },
            search(){
                this.realSearchText=this.searchText;
                this.page=1;
                this.getUserDate();
            },
            pageChange(event){ 
                console.log(event);  
                this.page=event;
                    this.getUserDate();
            },
            pageSizeChange(event){
                this.limit=event;
                this.getUserDate();

            },
            getUserDate(){
                axios.post(
                    "http://10.31.160.22:3000/users/list",{
                    name:this.realSearchText,limit:this.limit,page:this.page
                }).then(res=>{
                    this.data=res.data.docs;
                    this.title=res.data.total;
                    this.page=res.data.page;
                    console.log(this.page);
                });  
            },
            manyDelete(){
                var selectDataID=[];
                for(var i=0;i<this.selectData.length;i++){
                    selectDataID.push(this.selectData[i]._id);
                }
                console.log(selectDataID);
                if(this.data.length==selectDataID.length&&this.page!=1){
                    this.page-=1
                }
                 axios.post("http://10.31.160.22:3000/users/manydata/delete",{id:selectDataID}).then(res=>{
                      this.$Modal.success({
                    title: 'delete success',
                    content: `${res}`
                })
                  this.getUserDate();
                 });
                
            },
            addSelectData(event){
              this.selectData=event;
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid,value) => {
                    if (valid) {
                        if(this.type=="create"){
                        axios.post("http://10.31.160.22:3000/users/data",this.formValidate).then(res=>{
                        this.$Message.success('添加成功');
                        this.handleReset(name)
                        console.log(res);
                        this.modal=false;
                        this.getUserDate();
                        }
                        )
                        }
                        if(this.type=="change"){
                            console.log(this.formValidate);
                            axios.put(`http://10.31.160.22:3000/users/data/${this.formValidate._id}`,this.formValidate).then(res=>{
                        this.$Message.success("修改成功");
                        this.modal=false;
                        this.getUserDate();
                        }
                        )
                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })

            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        },
        created(){
            this.getUserDate();
        }
    }
</script>
<style lang="scss">
</style>